<template>
    <div class="code" @click="createCode">{{ currentCode }}</div>
</template>

<script>
export default {
    name: 'VerificationCode',
    data() {
        return {
            currentCode: null
        };
    },
    methods: {
        createCode() {
            let code = '';
            let codeLength = 4;
            let codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            for (let i = 0; i < codeLength; i++) {
                let charNum = Math.floor(Math.random() * 52);
                code += codeChars[charNum];
            }
            this.$emit('on-change', code);
            this.currentCode = code;
        }
    },
    mounted() {
        this.createCode();
    }
};
</script>

<style lang="less" scoped>
    .code {
        background-color: #FFFFFF;
        font-family:Arial;
        font-style:italic;
        color:blue;
        font-size:30px;
        border:0;
        letter-spacing:3px;
        font-weight:bolder;
        float:left;
        padding: 0 2px;
        cursor:pointer;
        height: 38px;
        width: 100%;
        border-radius: 2px;
        line-height: 38px;
        text-align:center;
        vertical-align:middle;
    }
</style>
